<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>20220922</title>
	</head>
	<body>
		
		
		
		
		<!-- 基于弹性布局，实现典型页面结构 -->
		
		<style>
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.nav{
				width: 100%;
				height: 50px;
				background-color: rgb(236, 255, 217);
				font-size: 20px;
				text-align: center;
				line-height: 50px;
			}
			
			.container{
				width: 100%;
				height: 650px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.container .left,.container .right{
				width: 20%;
				height: 100%;
				background-color: rgb(222, 231, 224);
				font-size: 20px;
				text-align: center;
				line-height: 650px;
			}
			.container .content{
				width: 60%;
				height: 100%;
				background-color: rgb(240, 225, 214);
				font-size: 20px;
				text-align: center;
				line-height: 650px;
			}

			.footer{
				width: 100%;
				height: 50px;
				background-color: rgb(235, 255, 217);
				font-size: 20px;
				text-align: center;
				line-height: 50px;
			}
			
		</style>
		
		
		<div class="nav">
			导航栏
		</div>
		<div class="container">
			<div class="left">
				左侧边栏
			</div>
			<div class="content">
				主题内容
			</div>
			<div class="right">
				右侧边栏
			</div>
		</div>
		<div class="footer">
			页脚
		</div>
		
		
		
		
		<!-- 弹性布局 flex-->
        <!-- <style>
        	.parent{
        	   /* width: 100%让当前元素的宽度和他的父元素一样宽; */
        	   width: 100%;
        	   height: 200px;
        	   background-color: gray;
			   
			   display: flex;
			   /* 默认是垂直方向的布局 flex改为水平反向布局 默认是在左上角（弹性布局 */
			   
			   justify-content: space-around;
			   /* 内容的位置  start end center 
			   space-between 让元素中间有一些等分的间隔，（浏览器自动计算的）
			   space-around 让元素中间有一些等分的间隔，最左边和最右边也有间隔*/
			   
			   align-items: center;
			   /* 垂直方向的布局 */
        	}   
        	  
			.one,.two,.three{
			   width: 100px;
			   height: 100px;
			   background-color: red;
			}
			   
        </style>
        
        <div class="parent">
        	<div class="one">1</div>
        	<div class="two">2</div>
        	<div class="three">3</div>
			<div class="one">4</div>
			<div class="one">5</div>
        </div> -->

	
	
		 <!-- 盒模型
		  边框 border
		  内容 content
		  内边距 padding 
		  外边距 margin  外边距在垂直反向会存在塌陷情况（会重叠）
		   -->
		   
   
		   
<!-- 		   <style>
			   .one{
				   width: 500px;
				   height: 300px;
				   background-color: aquamarine;
			   }
			   .two{
				   width: 200px;
				   height: 100px;
				   background-color: bisque;
				   
				   margin: 0 auto;/* 浏览器水平居中 */
			   }
			   
		   </style>
		   
		   
		   <div class="one">
			   <div class="two">
				   这是一只猫哥
			   </div>
		   </div> -->
		   

		   
<!-- 		<style>
			 div{
				 width: 200px;
				 height:100px;
				 border: 5px black dashed;/* 边框 默认情况下会撑大元素*/
				 box-sizing: border-box;/* 边框向内缩 阻止撑大元素 */
				 
				 padding: 10px;/* 内边距 默认情况下会撑大元素*/
			 }
			 .one{
				 margin: 10px;
			 }
			 .two{
				 margin: 10px;
			 }
		</style>
		
		
		<div class="one">这是一个元素</div>
		<div class="two">这是一个元素</div> -->
		
	
		
	</body>
</html>
